<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>订单管理</a-breadcrumb-item>
          <a-breadcrumb-item>订单列表</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10 flex align-items justify-content-between">
        <a-form layout="inline" autocomplete="off">
          <a-form-item label="订单编号">
            <a-input v-model:value.trim="queryParams.orderNo" size="small" style="width: 160px" @change="handleSearch"
                     placeholder="请输入订单编号" allow-clear/>
          </a-form-item>
          <a-form-item label="用户编号">
            <a-input v-model:value.trim="queryParams.memberId" size="small" style="width: 160px" @change="handleSearch"
                     placeholder="请输入用户编号" allow-clear/>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                ref="select"
                size="small"
                placeholder="请选择"
                allow-clear
                @change="handleSearch"
                v-model:value="queryParams.status"
                style="width: 120px"
            >
              <a-select-option :value="1">未付款</a-select-option>
              <a-select-option :value="2">待配送</a-select-option>
              <a-select-option :value="3">已配送</a-select-option>
              <a-select-option :value="4">已完成</a-select-option>
              <a-select-option :value="5">待评价</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" size="small" @click="handleSearch">
              <SearchOutlined/>
              {{ t("button.Search") }}
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               rowKey="id"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 255px)' }"
               :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
               :pagination="false"
               :data-source="tableData"
               size="middle" sticky bordered>
        <template #bodyCell="{ column, text, record }">

          <template v-if="column.dataIndex === 'shopName'">
            <div class="flex align-items">
              <a-image
                  :height="30"
                  :src="record.shopLogoImg"
                  fallback="/imgs/1px.png"
              />
              <span class="ml10">{{ text }}</span></div>
          </template>

          <template v-if="column.dataIndex === 'status'">
            <span v-if="text==1">未付款</span>
            <span v-if="text==2">待配送</span>
            <span v-if="text==3">已配送</span>
            <span v-if="text==4">已完成</span>
            <span v-if="text==5">待评价</span>
          </template>
<!--          <template v-if="column.dataIndex === 'operation'">-->
<!--            <div class="editable-row-operations">-->
<!--              <span>-->
<!--              <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">-->
<!--               <a-button type="primary" size="small" danger> <template #icon><CloseOutlined-->
<!--                   style="font-size:12px"/></template>{{ t('button.Delete') }}</a-button>-->
<!--              </a-popconfirm>-->
<!--            </span>-->
<!--            </div>-->
<!--          </template>-->
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            show-size-changer
            :total="total"/>
      </div>
      <goods-add ref="addRef"></goods-add>
    </div>
  </div>
</template>
<script lang="ts" setup>
const {t} = useI18n()
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const tableLoading = ref(true)
const addLoading = ref(false)
const addRef = ref({})
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  status: null,
  memberId: null,
  orderNi: '',
})

const state = reactive({
  selectedRowKeys: [],
  loading: false,
})


const columns = [
  {
    title: '序号',
    fixed: "left",
    align: "center",
    width: 60,
    dataIndex: 'index',
    customRender: ({text, record, index}) => index + 1
  },
  {
    title: '店铺名称',
    align: "center",
    dataIndex: 'shopName',
    width: 200,
  },
  {
    fixed: "left",
    title: '订单号',
    dataIndex: 'orderNo',
    width: 200,
  },
  {
    title: '交易号',
    align: "center",
    dataIndex: 'tradeId',
    width: 100,
  },
  {
    title: '商品价格',
    dataIndex: 'goodsTotalPrice',
    align: 'center',
    width: 100,
    customRender: ({text, record, index}) => '￥' + text ? text : 0
  },
  {
    title: '实付金额',
    dataIndex: 'actualPrice',
    align: 'center',
    width: 100,
    customRender: ({text, record, index}) => '￥' + text ? text : 0
  },
  {
    title: '商品数量',
    dataIndex: 'goodsTotalQuantity',
    align: 'center',
    width: 100,
  },
  {
    title: '配送方式',
    align: 'center',
    dataIndex: 'shoppingWay',
    width: 100,
    customRender: ({text, record, index}) => text == 1 ? "自取" : "配送"
  },
  {
    title: '取餐号',
    align: 'center',
    dataIndex: 'queueNo',
    width: 100,
  },
  {
    title: '联系人',
    align: 'center',
    dataIndex: 'contactRealname',
    width: 180,
    customRender: ({text, record, index}) => {
      return "编号：" + record.memberId + "，姓名：" + text
    }
  },
  {
    title: '联系电话',
    align: 'center',
    dataIndex: 'contactPhone',
    width: 100,
  },
  {
    title: '订单状态',
    align: 'center',
    dataIndex: 'status',
    width: 100,
  },
  {
    title: '订单支付时间',
    align: 'center',
    dataIndex: 'paymentSuccessTime',
    width: 180,
  },
  {
    title: '订单完成时间',
    align: 'center',
    dataIndex: 'orderCompletionTime',
    width: 180,
  },
  {
    title: '支付方式',
    align: 'center',
    dataIndex: 'paymentType',
    width: 180,
    customRender: ({text, record, index}) => text == 1 ? "支付宝" : "微信"
  },
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   align: "center",
  //   fixed: "right",
  //   width: 280,
  // },
];

// 查询表格信息
const handleLoadData = async () => {
  tableLoading.value = true
  const res = await useLoadOrderList(queryParams)
  tableData.value = res.data.records
  total.value = res.data.total
  pages.value = res.data.pages
  tableLoading.value = false
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLoadData()
}

// 选择行
const onSelectChange = (selectedRowKeys) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

// 添加商品
const handleOpenAdd = () => {
  addLoading.value = true
  addRef.value.handleOpen()
  addLoading.value = false
}

// 设置秒杀商品
const handleSeckillGoods = async (id) => {
  try {
    await useToSeckillGoods(id)
    useMessage().success("设置成功!");
  } catch (e) {
    useMessage().error(e.msg);
  }
}

// 编辑
const handleEdit = (id) => {
  addLoading.value = true
  addRef.value.handleOpen(id)
  addLoading.value = false
}

// 删除
const handleDelete = async (id) => {
  const res = await useDeleteGoods(id)
  useMessage().success("删除成功!");
  handleLoadData()
}


onMounted(() => {
  handleLoadData()
})

</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
